<template>
  <div class="userAdd">
    <el-tabs type="border-card">
      <el-tab-pane label="添加用户" required="true">
        <el-form
          :model="formName"
          :rules="rules"
          ref="formName"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="昵称" prop="name">
            <el-input v-model="formName.name"></el-input>
          </el-form-item>
          <el-form-item label="账号" prop="account">
            <el-input v-model="formName.account"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="formName.password" type="password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="passwords">
            <el-input v-model="formName.passwords" type="password"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="formName.email" type=""></el-input>
          </el-form-item>
          <el-form-item label="电话号码" prop="phone">
            <el-input v-model="formName.phone" type=""></el-input>
          </el-form-item>
          <el-form-item prop="permissions" label="用户身份">
            <el-select v-model="formName.permissions" placeholder="请选择">
              <el-option label="普通用户" value="2"></el-option>
              <el-option label="管理员" value="1"></el-option>
              <el-option label="超级管理员" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addAccount('formName')"
              >添加</el-button
            >
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  // name:"userAdd",
  data() {
    return {
      formName: {
        name: "",
        account: "",
        password: "",
        passwords: "",
        email: "",
        phone: "",
        permissions: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入昵称", trigger: "blur" },
          { min: 2, max: 7, message: "长度在 2 到 7 个字符", trigger: "blur" },
        ],
        account: [
          { required: true, message: "请输入账户", trigger: "blur" },
          {
            min: 5,
            max: 11,
            message: "长度在 5 到 11 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 11,
            message: "长度在 6 到 11 个字符",
            trigger: "blur",
          },
        ],
        passwords: [
          // { validator: validatePass2, trigger: "blur" },
          {
            min: 6,
            max: 11,
            message: "长度在 6 到 11 个字符",
            trigger: "blur",
          },
        ],
        permissions: [
          { required: true, message: "请选择权限信息", trigger: "blur" },
        ],
        // // 验证邮箱
        // email: [{ required: true, validator: checkEmail, trigger: "blur" }],
        // // 验证手机号
        // phone: [{ required: true, validator: checkPhone, trigger: "blur" }],
      },
    };
  },
  methods: {
    addAccount(formName) {
      let permissions = sessionStorage.getItem("permissions");
      if (permissions != 0) {
        this.$message({
          type: "error",
          message: "无权限操作",
        });
        return;
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const data = {
            name: this.formName.name,
            account: this.formName.account,
            password: this.formName.passwords,
            email: this.formName.email,
            phone: this.formName.phone,
            // date: time.newDate(),
            permissions: this.ruleForm.permissions,
          };
          console.log(data);
          this.$http.post("user", data).then(
            (res) => {
              this.$message({
                message: "添加成功",
                type: "success",
              });
              this.$refs[formName].resetFields();
            },
            (err) => {
              this.$message({
                message: "添加失败！",
                type: "error",
              });
            }
          );
        } else {
          this.$message({
            message: "验证失败...输入不合法",
            type: "error",
          });
        }
      });
    },
  },
  mounted() {
    let permissions = sessionStorage.getItem("permissions");
    if (permissions != 0) {
      this.$message({
        type: "info",
        message: "当前账户无法添加账号",
      });
    }
  },
};
</script>

<style lang="less" scope>
.el-input {
  width: 350px;
}
.userAdd {
  width: 530px;
  height: 100%;
  .el-form {
    .el-form-item {
      .el-form-item__content {
        .el-input {
          .el-input__inner {
            width: 350px;
          }
        }
      }
    }
  }
  h1 {
    margin-left: 100px;
    height: 40px;
  }
}
</style>